<template>
    <section>
      <div class="title_index" style="margin: 0;padding-top: .4rem;">
        <img src="../../assets/index/line.png" class="title_index_img">
        <span class="title_index_tex">计算结果</span>
      </div>
      <div>
        <div style="margin-bottom: .15rem;">
          <p>运价</p>
          <p style="color: red;margin-top: .1rem;"><span style="font-size: .6rem;">{{price}}</span><span>元</span></p>
        </div>
        <div style="display: flex;justify-content: space-around;">
          <div>
            <p>全程</p>
            <p style="font-size: .36rem;margin-top: .1rem;">{{distance}}</p>
          </div>
          <div>
            <p>时长</p>
            <p style="font-size: .36rem;margin-top: .1rem;">
              <span v-if="timeis">{{time0}}</span>
              <span style="font-size: .28rem" v-if="timeis">天</span>
              <span>{{time1}}</span>
              <span style="font-size: .28rem" v-if="istime1">小时</span>
              <span>{{time2}}</span>
              <span style="font-size: .28rem">分钟</span></p>
          </div>
        </div>
      </div>
      <div class="title_index">
        <img src="../../assets/index/line.png" class="title_index_img">
        <span class="title_index_tex">推荐商家</span>
      </div>
      <ul>
        <li style="padding:.24rem;display: flex;justify-content: space-between;" v-for="(item,index) in list" :key="index">
          <span>{{item.plCompanyName}}</span>
          <a :href="'tel:'+item.butterPhone" style="color: #008aff;">{{item.butterPhone}}</a>
        </li>
      </ul>
      <div class="title_index" style="justify-content: space-between;margin-bottom: .2rem;">
        <div>
          <img src="../../assets/index/line.png" class="title_index_img">
          <span class="title_index_tex">运价走势</span>
        </div>
        <span style="padding-right: .24rem;color: #666;">单位：元</span>
      </div>
      <div id="main" style="width:100%;height: 340px">

      </div>
    </section>
</template>

<script>
    let echarts = require('echarts/src/echarts')
    require('echarts/src/chart/line')
    require('echarts/src/component/tooltip')
    require('echarts/src/component/title')
    require('echarts/src/component/visualMap')
    export default {
        name: "priceQueryResult",
        data(){
          return{
            list:[],
            price:'',
            distance:'',
            time1:'',
            time2:'',
            time0:'',
            timeis:false,
            istime1:false,
          }
        },
      mounted(){
        let YUNJIA = JSON.parse(sessionStorage.getItem('YUNJIA'));
        let TO_OBJECT = JSON.parse(sessionStorage.getItem('TO_OBJECT'));
        let SHOP = JSON.parse(sessionStorage.getItem('SHOP'));
        const that = this;
        this.$ajax.post(window.g.apiUrl+'/user/isLog.do')
          .then((response)=>{
            if(response.data.code != 200){
              this.$dialog.notify({
                mes: '登录失效，正在跳转至登录页面',
                timeout: 1500,
                callback:()=>{
                  that.$router.push('/login');
                }
              });
            }
          }).catch(()=>{
        })

        if(SHOP != null){
          this.list = SHOP.data;
        }
        if(TO_OBJECT == null){
          return;
        }
        if(TO_OBJECT.time.indexOf('天') >= 0){
          this.timeis = true;
          this.istime1 = true;
          this.time0 = TO_OBJECT.time.substring(0,TO_OBJECT.time.indexOf('天'));
          this.time1 = TO_OBJECT.time.substring(TO_OBJECT.time.indexOf('天')+1,TO_OBJECT.time.indexOf('小时'));
          this.time2 = TO_OBJECT.time.substring(TO_OBJECT.time.indexOf('小时')+2,TO_OBJECT.time.indexOf('分钟'));
        }else if(TO_OBJECT.time.indexOf('小时')>= 0){
          this.istime1 = true;
          this.time1 = TO_OBJECT.time.substr(0,TO_OBJECT.time.indexOf('小时'));
          this.time2 = TO_OBJECT.time.substring(TO_OBJECT.time.indexOf('小时')+2,TO_OBJECT.time.indexOf('分钟'));
        }else{
          this.time2 = TO_OBJECT.time.substring(0,TO_OBJECT.time.indexOf('分钟'));
        }
        this.price = TO_OBJECT.price;
        this.distance = TO_OBJECT.distance+'km';
        for(var i = 0;i< YUNJIA.priceMonth.length;i++){
          if(YUNJIA.priceMonth[i] == 0){
            YUNJIA.priceMonth[i] = TO_OBJECT.price;
          }
        }
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
          title: {
            text: ''
          },
          visualMap: [{
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 0,
          }],
          tooltip: {
            trigger: 'axis',
          },
          grid: {
            top: '3%',
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: [{
            data: YUNJIA.month
          }],
          yAxis: [{
            splitLine: { show: false }
          }],
          series: [{
            type: 'line',
            showSymbol: true,
            data: YUNJIA.priceMonth,
            smooth: true,
            itemStyle: {
              normal: {
                color: "#fff",  // 会设置点和线的颜色，所以需要下面定制 line
                borderColor: "#BC1E1E"  // 点边线的颜色
              }
            },
            lineStyle: {
              normal: {
                color: "#BC1E1E"   // 线条颜色
              }
            },
          }]

        });

      }
    }
</script>

<style scoped>
  .title_index_tex {
    font-size: .28rem;
    font-weight: bold;
    margin-left: .2rem;
  }

  .title_index_img {
    width: .1rem;
    height: .5rem;
  }
  .title_index {
    display: flex;
    align-items: center;
    margin-top: .4rem;
  }
  .title_index div{
    display: flex;
    align-items: center;
  }
</style>
